<template>
  <div>
    <!--工具类-->
    <div v-if="role.actionAdd">
      <div style="text-align: right;width: 100%" >
        <Button type="primary" icon="plus-round" class="y_condition"
                @click="addNew">添加功能
        </Button>
      </div>
      <hr>
    </div>

    <Row class-name="y_query_right">
      <Input v-model.trim="actionSearchParams.actionNameSearch" placeholder="请输入功能编码" clearable
             class="y_condition"></Input>

      <Select  @on-change="changeModuleSearch" placeholder="请选择" :label-in-value=true style="display: none"
               class="y_condition">
        <Option v-for="item in moduleList" :value="item.id" :key="item.id">{{item.name}}</Option>
      </Select>

      <Button type="primary"  icon="search" class="y_condition"
              @click="search">查询
      </Button>

    </Row>

    <!--表格和分页-->
    <Table stripe border :context="this" :columns="tableTitles" :data="actionList" class="table_css"
           no-data-text="暂无数据" ></Table>

    <div style="float: right;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber"
            :current="tPage.currentPage" @on-change="changePage" @on-page-size-change="sizeChange"
            show-sizer show-elevator/>
    </div>
    <!--删除确认弹出框-->
    <Modal
      v-model="status.modalDelete.isShow"
      title="确认删除"
      :loading="status.modalDelete.isLoading"
      @on-ok="deleteItem">
      <p>确认删除功能<strong> {{status.modalDelete.action.name}}?</strong></p>
    </Modal>
    <!--新店铺弹出框-->
    <Modal
      v-model="status.modalModify.isShow"
      :title="status.modalModify.title"
      :closable="false"
      :mask-closable="false"
      :styles="{top: '20px',bottom:'20px'}"
      :loading="status.modalModify.isLoading"
      @on-ok="newOrModify"
      width="800"
    >

      <Form ref="modifyActionItem" :model="action" :rules="ruleAction" :label-width="100"
            class="modal_newuser_form">
        <FormItem label="功能名称" prop="name">
          <Input v-model.trim="action.name" placeholder="请输入"
                 class="modal_newuser_form_input"></Input>
        </FormItem>
        <FormItem label="功能编号" prop="id">
          <InputNumber v-model="action.id" placeholder="请输入"
                 class="modal_newuser_form_input"></InputNumber>
        </FormItem>
        <FormItem label="排序" prop="sequence">
          <InputNumber v-model="action.sequence" placeholder="请输入"
                 class="modal_newuser_form_input"></InputNumber>
        </FormItem>
        <FormItem label="功能说明">
          <Input v-model.trim="action.note" placeholder="请输入"
                 class="modal_newuser_form_input"></Input>
        </FormItem>
        <FormItem  label="所属模块" prop="moduleId">
          <Select  v-model="action.moduleId" @on-change="changeModule" placeholder="请选择" :label-in-value=true
                  class="modal_newuser_form_input">
            <Option v-for="item in moduleList" :value="item.id" :key="item.id">{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem
          v-for="(item, index) in action.operationJson"
          :key="index"
          :label="'url' + (index + 1)">
          <Row>
            <Input prop="name" type="text" v-model="item.name" style="max-width: 100px;" placeholder="请输入名称" class="modal_newuser_form_input"></Input>
            <Input type="text" v-model="item.note" style="max-width: 150px;" placeholder="请输入url" class="modal_newuser_form_input"></Input>
            <Input type="text" v-model="item.url" style="max-width: 100px;" placeholder="请输入说明" class="modal_newuser_form_input"></Input>
            <Checkbox label="核心url">核心url暂时没用</Checkbox>
            <Button  @click="urlRemove(index)">删除</Button>
          </Row>
        </FormItem>
        <FormItem>
          <Row>
            <Col span="12">
            <Button type="dashed" long @click="urlAdd" icon="plus-round">新增</Button>
            </Col>
          </Row>
        </FormItem>

      </Form>


    </Modal>
  </div>

</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/actions/action_data"
  import {init,add, deleted, modify, webAddOrModify, webDelete, webList} from "./js/actions/action_funs"

  export default {
    //components: {ICol},
    data(){
      return {
        tPage: tiyData.tPage,
        status: tiyData.tStatus,
        role:tiyData.tRole,
        action: tiyData.tParams.action,
        //验证时的 rule
        ruleAction: tiyData.tStatus.rules,
        //搜索条件
        actionSearchParams: tiyData.tParams,
        actionList: tiyData.tData.actionList,
        moduleList: tiyData.tData.moduleList,
        tableTitles: [
          tiyData.tTable.tableRowIndex,
          tiyData.tTable.tableRowNumber,
          tiyData.tTable.tableRowType,
          tiyData.tTable.tableRowOwner,
          tiyData.tTable.tableRowName,
          // tiyData.tTable.tableRowSequence,
          // tiyData.tTable.tableRowAction(this)
        ]

      }
    }
    ,
    computed : {

    },
    methods: {

      editItem(index)
      {
        modify(this, tiyData, index);
      },
      deleteAction(index){
        deleted(this, tiyData, index);
      },
      deleteItem(){
        webDelete(this, tiyData);
      },
      search(){
        tiyData.tPage.currentPage = 1;
        this.getStoreListFromServer();
      },
      getStoreListFromServer()
      {
        webList(this, tiyData);
      }
      ,
      addNew(){
        add(this, tiyData);
      },
      newOrModify(){
        webAddOrModify(this, tiyData, "modifyActionItem");

      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        this.getStoreListFromServer();
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        this.getStoreListFromServer();
      },
      changeModule(module){
        tiyData.tParams.action.moduleName = module.label;
        tiyData.tParams.action.moduleId = module.value;
      },
      changeModuleSearch(module){
        tiyData.tParams.actionModuleIdSearch = module.value;
      },
      urlAdd () {
        tiyData.tParams.action.operationJson.push({
          name: '',
          note: '',
          url: '',
          isMain: false
        });
      },
      urlRemove (index) {
        tiyData.tParams.action.operationJson.splice(index, 1);
      }

    },
    mounted(){
        init(this, tiyData);
      webList(this, tiyData);
    },
    mounted(){

    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
  @import  (once,optional)  "../css/base";
  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_newuser_form_input {
    width: 180px;
    margin-right: 10px;
  }
</style>
